<template>
    <div>
        <!-- 头部 -->
        <headerView class="header">
            <template v-slot:center>
                <span class="title">2/<span class="smell">4 </span>门店信息</span>
            </template>
        </headerView>
        <div class="content">
            <div class="remind">
                <p>为了方便我们与您尽快联系达成合作，请如实填写以下资
                    料，谢谢您的支持与配合</p>
            </div>
            <div class="name-and-tel">
                <div class="form-box">
                    <div class="lab">
                        <span>负责人</span>
                        <input type="text" placeholder="请输入负责人真实姓名" v-model="personCharge">
                    </div>
                    <div class="lab">
                        <span>手机号码</span>
                        <input type="text" placeholder="请输入手机号" id="tel-input" v-model="phoneNumber">
                        <button @click="tel" class="phone1">
                            <span>{{code}}</span>
                            <van-icon name="arrow-down" />
                        </button>
                    </div>
                </div>
            </div>
            <div class="name-and-tel">
                <div class="form-box">
                    <div class="lab">
                        <span>主营品类</span>
                        <input type="text" :placeholder="main" readonly>
                    </div>
                    <div class="lab">
                        <span>辅营品类</span>
                        <input type="text" :placeholder="au" readonly>
                    </div>
                </div>
            </div>
            <div class="name-and-tel">
                <div class="form-box">
                    <div class="lab">
                        <span>中文店名</span>
                        <input type="text" placeholder="请输入中文店名" v-model="chShopName">
                    </div>
                    <div class="lab">
                        <span>英文店名</span>
                        <input type="text" placeholder="请输入英文店名" v-model="eShopName">
                    </div>
                    <van-field readonly clickable name="area" :value="region" label="地区选择" placeholder="点击选择省市区"
                        @click="showArea = true" />
                    <van-popup v-model="showArea" position="bottom">
                        <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
                    </van-popup>
                    <div class="lab">
                        <span>详细地址</span>
                        <input type="text" placeholder="请输入详细地址" v-model="detailedAddress">
                    </div>
                </div>
            </div>
            <div class="upload_pictures_box">
                <div class="shopOutside">
                    <van-uploader v-model="pictureAddress" multiple max-count="1" upload-text="点击上传"
                        preview-size="200px" />
                    <p>店铺门面图(需包含完整牌匾)</p>
                </div>
                <div class="shopOutside">
                    <van-uploader v-model="pictureAddressIn" multiple max-count="1" upload-text="点击上传"
                        preview-size="200px" />
                    <p>店内真实环境图</p>
                </div>
            </div>
            <!-- 下一步按钮 -->
            <div class="btn_box">
                <van-button round class="btn_next" :disabled="checkedState" @click="goNext">下一步</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
import headerView from "../../components/headerView.vue";
export default {
    components: { headerView },
    data() {
        return {
            showArea: false,
            checkedState: false,
            code: "", //区号
            personCharge: "", // 负责人
            phoneNumber: "", // 手机号码
            main: "", // 主营品类
            au: "", // 辅营品类
            chShopName: "",  // 中文店名
            eShopName: "",  // 英文店名
            region: "",    // 地区选择
            detailedAddress: "", //详细地址
            pictureAddress: [], //店铺门面图地址
            pictureAddressIn: [], //店内真实环境图片地址
            areaList: {
                province_list: {
                    110000: '北京市',
                    120000: '天津市',
                    130000: '四川省',
                },
                city_list: {
                    110100: '北京市',
                    120100: '天津市',
                    130100: '成都市',
                },
                county_list: {
                    110101: '东城区',
                    110102: '西城区',
                    130101: '高新区',
                },
            }, // 数据格式见 Area 组件文档

        }
    },
    created() {
        this.code = this.$store.state.login.areaCode
        // this.main = this.$store.state.shop.myKind + this.$store.state.shop.MainCategory
        this.main = this.$store.state.shop.data.MainCategory
        this.au = this.$store.state.shop.data.AuxiliaryCategory
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        // 区号选择
        tel() {
            this.$router.push('/SelectTel')
        },
        onConfirm(values) {
            this.region = values
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/');
            this.showArea = false;
        },
        ...mapMutations(['shop/setShopInformation']),
        goNext() {
            let shopInformation = {
                personCharge: this.personCharge, // 负责人
                phoneNumber: this.code + this.phoneNumber, // 手机号码
                main: this.main, // 主营品类
                au: this.au, // 辅营品类
                chShopName: this.chShopName,  // 中文店名
                eShopName: this.eShopName,  // 英文店名
                region: this.region,    // 地区选择
                detailedAddress: this.detailedAddress, //详细地址
                pictureAddress: this.pictureAddress, //店铺门面图地址
                pictureAddressIn: this.pictureAddressIn, //店内真实环境图片地址
            }
            this['shop/setShopInformation'](shopInformation)
            this.$router.push('/LegalPerson')
        }
    }
}
</script>

<style lang="scss" scoped>
input {
    text-indent: 10px
}

/* 头部 */
.header {
    position: fixed;
    top: 0;
    z-index: 99;
}

.smell {
    font-size: 15px;
    color: rgb(187, 186, 186);
}

.title {
    margin: 0 auto;
}


/* 具体内容部分 */
.content {
    padding-top: 14%;
    width: 100%;
    height: 667px;
    margin: 0 auto;
    background-color: #f7f7f7;
}

/* 提醒 */
.remind {
    width: 100%;
    margin: 0 auto;
    background-color: #ffff;
    height: 50px;
}

.remind p {
    width: 90%;
    font-size: 13px;
    color: #898787;
    margin: 0 auto;
}

/* 负责人手机号码 */
.form-box {
    width: 90%;
    margin: 0 auto;
    padding: 4px 0;
}

.name-and-tel {
    margin: 16px 0;
    width: 100%;
    background-color: #ffff;
}

.lab {
    display: flex;
    align-items: center;
    margin: 10px 0;
    position: relative;
}

.lab span {
    font-size: 14px;
    width: 90px;
    margin-left: 17px;
    color: #646566;
}

.lab input {
    width: 70%;
    border: none;
    background-color: #eae7e7;
    border-radius: 10px;
    padding: 10px 0;
    font-size: 15px;
}

.lab button {
    position: absolute;
    left: 30%;
    width: 16%;
    border: none;
    font-size: 15px;
    padding: 10px 0;
    background-color: #eae7e7;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    // background-color: pink;
}

.lab button span {
    margin: 0;
}

#tel-input {
    width: 55%;
    margin-left: 55px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

input::placeholder {
    font-size: 14px;
    text-align: left;
    line-height: normal;
    color: #989595;
}

/* 上传图片 */
.upload_pictures_box {
    width: 100%;
    background-color: #ffff;
    text-align: center;
    padding-bottom: 40px;
}

.shopOutside {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    /* background-color:pink; */
}

.shopOutside p {
    font-size: 13px;
}

/* 下一步按钮 */
.btn_box {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: 0;
    z-index: 99;
}

.btn_next {
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;
    margin: 12px 0;
}

.field {
    background-color: #eae7e7;
    border-radius: 10px;
}

.van-field__value {
    background-color: #eae7e7;
    border-radius: 10px;
}

// .van-field{
//     padding: 6px 2px;
// }
</style>